<template>
  <div class="index">
    <router-view></router-view>
    <van-nav-bar route>
      <template #left>
        <van-icon name="shop-o" size="35" @click="toDetail" />
      </template>
      <template #title>
        <van-search v-model="value" placeholder="请输入搜索关键词" />
      </template>
      <template #right>
        <div @click="toLogin" v-if="judge">登录</div>
        <div @click="toMy" v-else>我的</div>
      </template>
    </van-nav-bar>

    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in banners" :key="item._id">
        <img :src="item.coverImg" alt="" />
      </van-swipe-item>
    </van-swipe>

    <van-grid square>
      <van-grid-item
        v-for="(value, index) in classify"
        :key="index"
        :icon="value.imgSrc"
        :text="value.name"
      />
    </van-grid>
    <div class="countdown">
      <span>好物秒杀倒计时</span>
      <van-count-down :time="time" format=" HH 时 mm 分 ss 秒" />
    </div>
    <div class="pro-list">
      <van-list>
        <div
          class="product"
          v-for="item in alllproduct"
          :key="item._id"
          @click="goxiangqing(item._id)"
        >
          <img :src="item.coverImg" alt="" />
          <div class="product-r">
            <div>{{ item.name }}</div>
          </div>
        </div>
      </van-list>
    </div>

    <button v-if="btnFlag" @click="gotop">回到顶部</button>
  </div>
</template>

<script>
import { Toast } from "vant";
import classify from "@/lib/bar";
import { getToken } from "@/utils/auth";
import { reqBannersAPI, reqProductsAPI } from "../api/product";
export default {
  components: {},
  data() {
    return {
      time: 30 * 60 * 60 * 1000,
      btnFlag: false,
      classify: classify.classify,
      banners: [],
      alllproduct: [],
      value: "",
      judge: "",
    };
  },
  computed: {},
  watch: {},

  methods: {
    toMy() {
      this.$router.push("my");
    },
    toDetail() {
      this.$router.push("sort");
    },
    toLogin() {
      this.$router.push("login");
    },
    gotop() {
      const that = this;
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          that.scrollTop + ispeed;
        if (that.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 16);
    },
    onClickLeft() {
      Toast("返回");
    },
    onClickRight() {
      Toast("按钮");
    },
    //跳转详情页面
    goxiangqing(id) {
      this.$router.push(`/detail/${id}`);
    },

    async getBanners() {
      let result = await reqBannersAPI();
      this.banners = result.products;
    },

    async getAlllist() {
      let per = 200;
      let result = await reqProductsAPI({ per });
      localStorage.setItem("products", JSON.stringify(result.products));
      this.alllproduct = result.products;
    },
    scrollToTop() {
      const that = this;
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      that.scrollTop = scrollTop;
      if (that.scrollTop > 500) {
        that.btnFlag = true;
      } else {
        that.btnFlag = false;
      }
    },
  },
  onLoad() {},
  created() {
    this.getBanners();
    this.getAlllist();

    if (getToken()) {
      this.judge = false;
    } else {
      this.judge = true;
    }
  },
  mounted() {
    window.addEventListener("scroll", this.scrollToTop);
  },

  destroyed() {
    window.removeEventListener("scroll", this.scrollToTop);
  },
};
</script>
<style scoped>
.van-nav-bar {
  height: 54px;
}
.van-swipe-item img {
  width: 100%;
  height: 200px;
  display: block;
}
.countdown {
  display: flex;
  padding: 10px;
}
.countdown span {
  font-size: 20px;
  color: brown;
}
.van-count-down {
  margin-left: 15px;
  margin-top: 3px;
  /* float: left; */
  font-size: 18px;
  color: red;
}
.van-list {
  display: flex;
  flex-wrap: wrap;
}
.product {
  width: 50%;
  flex: left;
}
.product img {
  width: 175px;
}
.pro-list {
  margin-bottom: 50px;
}
button {
  position: fixed;
  color: red;
  bottom: 100px;
  right: 10px;
}
</style>
































